﻿<div data-bind="with: context">
	<div style="position: absolute; top: 0; height: 100%; z-index: 1000" data-bind="visible: operations().length != 0, style: { width: $dsView.sizeMonitor( $( $element ).closest( '.durandal-wrapper' ) ).width() }">
		<div style="position: absolute; background: silver; height: 100%; opacity: .8; z-index: -1" data-bind="style: { width: $dsView.sizeMonitor( $( $element ).parent().parent() ).width() }" />
	
		<div style="display: table; width: 100%; height: 100%; font: 8pt verdana;">
			    <div style="display: table-cell; text-align: center; vertical-align: middle">
				    <div style="display: inline-block; background-color: white; border: 1px solid black; padding: 10px; text-align: left">
					    <div data-bind="html: options().title" style="font-weight: bold" />
				
					    <div id="items" style="margin: 8px 0" data-bind="foreach: operations">
						    <div data-bind="compose: $data" />
					    </div>
				
					    <div style="margin: 8px 0">
						    Progress: <span data-bind="text: 100 * percentageComplete()"></span>
					    </div>
				
					    <div data-bind="html: 'Status: {0}'.format(status().description)"></div>
				
					    <div style="margin: 8px 0" data-bind="visible: options().allowCancel">
						    <button style="float: right; width: 150px">Cancel</button>
						    <div style="padding-top: 7px">
							    <div data-bind="jqxCheckBox: { checked: options().closeOnCompletion }">Close when finished</div>
						    </div>
					    </div>
					    <button data-bind="visible: allowClose() && status().value >= core.ExecutionStatus.Completed.value, click: close" style="width: 100%; margin: 
8px 0">Close</button>
				    </div>		
			    </div>
		    </div>
	</div>
</div>